<template>
	<view class="details">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in arr" :key="item">
				<image :src="item" style="width: 100%;height: 100%;"></image>
			</swiper-item>
		</swiper>
		<view>
			<view style="background: orangered;color: white;">
				<span style="margin-left: 5px;">￥{{ item.originprice }}</span>
				<span style="margin-left: 5px;">销量：{{ item.sales }}</span>
				<span style="margin-left: 15px;">{{ item.brand }}</span>
				<span style="margin-left: 2px;">{{ item.category }}</span>

				<h3>{{ item.proname }}</h3>
			</view>
			<view style="height:500rpx;overflow: auto;">
				<text style="font-size: 15px;font-weight: bold;">{{ item.desc }}</text>
			</view>
		</view>

		<view class="footer" style="width: 100vw;height: 10vh;">
			<view class="goods-carts">
				<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addCart
	} from '../../api/api.js'
	export default {
		data() {
			return {
				item: {},
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				arr: [],
				options: [{
						icon: 'chat',
						text: '客服'
					},
					{
						icon: 'shop',
						text: '店铺',
						info: 2,
						infoBackgroundColor: '#007aff',
						infoColor: "#f5f5f5"
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 2
					},
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],

			}
		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				if (e.content.text == '加入购物车') {
					const name = uni.getStorageSync('userName');
					if (name) {
						let userid1 = uni.getStorageSync('userid')
						let token = uni.getStorageSync('token')
						console.log(this.item.proid)
						addCart({
							userid: userid1,
							proid: this.item.proid,
							num: 1
						}).then(res => {
							if(res.data.code =='200'){
								uni.showToast({
								    title: '加入购物车成功',
								    //将值设置为 success 或者直接不用写icon这个参数
								    icon: 'success',
								    //显示持续时间为 2秒
								    duration: 2000
								})
							}
						})
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				} else {
					
				}
				this.options[2].info++
			}
		},
		onLoad(query) {
			if (query.item) {
				this.item = JSON.parse(decodeURIComponent(query.item));
				this.arr = [this.item.img1, this.item.img2, this.item.img3, this.item.img4, ]
			}else if(query.kinddeatilslist){
				this.item = JSON.parse(decodeURIComponent(query.kinddeatilslist));
				this.arr = [this.item.img1, this.item.img2, this.item.img3, this.item.img4, ]
			}
		}
	}
</script>

<style lang="scss">
	.details {
		width: 100vw;
		height: 50vh;
		position: relative;

		.swiper {
			width: 100%;
			height: 100%;
		}

		.footer {
			position: fixed;
			bottom: 0;
		}
	}
</style>